import React from "react";
import { Checkbox, Input, Select, Tabs, Form } from "antd";

import styles from "./Pannel.less";

import udStyles from "./UserTaskDetail.less";

const { TabPane } = Tabs;
const { Option } = Select;
const { TextArea } = Input;

@Form.create()
class ScriptTaskDetail extends React.Component {
  state = {
    overrideid: "",
    activeKey: "1",
    name: "",
    code: "",
    scriptFormat: "juel",
    resultVariable: "",
    scriptText: "",
    autoStoreVariables: false,
  };

  componentDidMount() {
    const { selectedModel = {} } = this.props;
    const { properties } = (selectedModel || {}).model || {};
    this.initFrom(properties);
  }

  componentWillReceiveProps(nextPops) {
    const { selectedModel = {} } = this.props;
    if (nextPops.selectedModel.id !== selectedModel.id) {
      const { properties = {} } = (nextPops.selectedModel || {}).model || {};
      this.initFrom(properties);
    }
  }

  handleChange = (name, value, isEmpty = false) => {
    const obj = {};
    const newValue = value || "empty";
    obj[name] = isEmpty ? value : newValue;
    this.setState({
      ...obj,
    });
    this.setState({ code: value });
  };

  initFrom({ baseInfo, scriptConf }) {
    this.setState({
      name: baseInfo?.name,
      code: baseInfo?.code,
      scriptFormat: scriptConf?.scriptFormat || "juel",
      autoStoreVariables: Boolean(scriptConf?.autoStoreVariables),
      resultVariable: scriptConf?.resultVariable,
      scriptText: scriptConf?.scriptText,
    });
  }

  render() {
    const {
      overrideid,
      activeKey,
      name,
      code,
      scriptFormat,
      autoStoreVariables,
      resultVariable,
      scriptText,
    } = this.state;
    const {
      disable,
      handleChangeProperties: propsHandleChangeProperties,
      handleGraphChange,
      selectedModel,
    } = this.props;

    const handleChangeProperties = (...args) => {
      propsHandleChangeProperties(...args);
      this.forceUpdate();
    };

    const scriptConf = {
      scriptFormat,
      autoStoreVariables,
      resultVariable,
      scriptText,
    };
    const {properties = {}} = (selectedModel || {}).model || {};
    const overrideidVal =
      overrideid === "empty" ? "" : overrideid || properties.overrideid;
    return (
      <>
        <div className={styles.headTitle}>脚本任务</div>
        <div
          className={`block-container ${styles.content} ${udStyles.container}`}
        >
          <Tabs
            activeKey={activeKey}
            onChange={key => this.setState({ activeKey: key })}
            size="small"
          >
            <TabPane tab="基础信息" key="1">
              {/* <div className={`${styles.content_item} ${styles.hq_item}`}> */}

              <div className={styles.content_item}>
                <span className={styles.item_label}>节点名称：</span>
                <Input
                  disabled={disable}
                  placeholder="请输入"
                  maxLength={30}
                  value={name || selectedModel?.label}
                  onChange={ev => this.setState({ name: ev.target.value })}
                  onBlur={ev => {
                    handleGraphChange("label", ev.target.value, false);
                    handleChangeProperties(
                      "baseInfo",
                      { name: ev.target.value, code },
                      selectedModel.model,
                      selectedModel.shape,
                      false,
                    );
                  }}
                />
              </div>
              <div className={styles.content_item}>
                <span className={styles.item_label}>节点标识：</span>
                <Input
                  disabled={disable}
                  maxLength={30}
                  placeholder="请输入"
                  value={overrideidVal}
                  onChange={ev =>  this.handleChange("overrideid", ev.target.value)}
                  onBlur={ev => {
                    handleChangeProperties(
                      "overrideid",
                      ev.target.value,
                      selectedModel.model,
                      selectedModel.shape,
                      false,
                    );
                    handleChangeProperties(
                      "baseInfo",
                      {
                        name: name || selectedModel?.label,
                        code: ev.target.value,
                      },
                      selectedModel.model,
                      selectedModel.shape,
                      false,
                    );
                  }}
                />
              </div>
            </TabPane>
            <TabPane tab="脚本设置" key="2">
              <div style={{ marginBottom: "12px" }}>
                <div style={{ marginBottom: "12px" }}>脚本类型：</div>
                <Select
                  disabled={disable}
                  style={{ width: "100%" }}
                  placeholder="请选择脚本类型"
                  value={scriptFormat}
                  onChange={ev => {
                    this.setState({ scriptFormat: ev });
                    handleChangeProperties(
                      "scriptConf",
                      { ...scriptConf, scriptFormat: ev },
                      selectedModel.model,
                      selectedModel.shape,
                      false,
                    );
                  }}
                >
                  <Option value="juel">JUEL</Option>
                  <Option value="groovy">Groovy</Option>
                  <Option value="JavaScript">JavaScript</Option>
                </Select>
              </div>
              <div style={{ marginBottom: "12px" }}>
                <div style={{ marginBottom: "12px" }}>脚本：</div>
                <TextArea
                  disabled={disable}
                  style={{ width: "100%" }}
                  placeholder="请输入脚本"
                  value={scriptText}
                  onChange={ev =>
                    this.setState({ scriptText: ev.target.value })
                  }
                  onBlur={ev => {
                    handleChangeProperties(
                      "scriptConf",
                      { ...scriptConf, scriptText: ev.target.value },
                      selectedModel.model,
                      selectedModel.shape,
                      false,
                    );
                  }}
                />
              </div>
              <div style={{ marginBottom: "12px" }}>
                <Checkbox
                  disabled={disable}
                  checked={Boolean(autoStoreVariables)}
                  onChange={ev => {
                    this.setState({ autoStoreVariables: ev.target.checked });
                    handleChangeProperties(
                      "scriptConf",
                      { ...scriptConf, autoStoreVariables: ev.target.checked },
                      selectedModel.model,
                      selectedModel.shape,
                      false,
                    );
                  }}
                >
                  自动存储变量
                </Checkbox>
              </div>
              <div style={{ marginBottom: "12px" }}>
                <div style={{ marginBottom: "12px" }}>结果变量：</div>
                <TextArea
                  disabled={disable}
                  style={{ width: "100%" }}
                  placeholder="请输入结果变量"
                  value={resultVariable}
                  onChange={ev =>
                    this.setState({ resultVariable: ev.target.value })
                  }
                  onBlur={ev => {
                    this.setState({ resultVariable: ev.target.value });
                    handleChangeProperties(
                      "scriptConf",
                      { ...scriptConf, resultVariable: ev.target.value },
                      selectedModel.model,
                      selectedModel.shape,
                      false,
                    );
                  }}
                />
              </div>
            </TabPane>
          </Tabs>
        </div>
      </>
    );
  }
}
export default ScriptTaskDetail;
